<?php include VIEW_PATH . 'layouts/_header.view.php'; ?>

<main id="main" class="d-flex">
    <div class="auth-form mx-auto">
        <div class="mt-3 text-center">
            <a href="/"><img class="mt-3 mb-3" src="/img/logo.png" alt=""></a>
        </div>
        <h1 class="mb-3 fs-28 text-center">登 录</h1>
        <form id="auth-form" method="POST" autocomplete="off">
            <div class="form-floating">
                <input type="text" class="ui-input" name="username" id="username" placeholder="用户名" autocomplete="off" required autofocus>
                <label for="username" id="nameHelp">用户名</label>
            </div>
            <div class="form-floating">
                <input type="password" class="ui-input" name="password" id="password" placeholder="密码" required>
                <label for="password" id="passwordHelp">密码</label>
            </div>
            <div class="form-floating">
                <input type="text" class="ui-input" name="captcha" id="captcha" placeholder="验证码" required>
                <img src="/home/captcha" class="auth-captcha hand" title="点击刷新验证码">
                <label for="captcha" id="captchaHelp">验证码</label>
            </div>
            <button type="button" id="submitButton" class="ui-button w-100 auth-btn mb-3" data-type="primary">登录</button>
        </form>
        <p class="mt-3 text-center">
            <a class="ui-button" href="/signup">注册</a>
        </p>
    </div>
</main>

<?php include VIEW_PATH . 'layouts/_js.view.php'; ?>
<script>
    $(function() {
        let flagName     = false;
        let flagPassword = false;
        let flagCaptcha  = false;

        // 验证用户名
        $('#username').change(function() {
            let name = $('#username').val();
            if (name.length < 3) {
                $('#username').addClass('error');
                $('#nameHelp').text('请输入 3~16 位的用户名').addClass('red');
                flagName = false;
            } else {
                $('#username').removeClass('error');
                $('#nameHelp').text('用户名').removeClass('red');
                flagName = true;
            }
        });
        // 验证密码
        $('#password').change(function() {
            let password = $('#password').val();
            if (password.length < 6) {
                $('#password').addClass('error');
                $('#passwordHelp').text('密码至少 6 位数').addClass('red');
                flagPassword = false;
            } else {
                $('#password').removeClass('error');
                $('#passwordHelp').text('密码').removeClass('red');
                flagPassword = true;
            }
        });
        // 验证验证码
        $('#captcha').change(function() {
            captcha = $('#captcha').val();
            if (captcha.length < 4) {
                $('#captcha').addClass('error');
                $('#captchaHelp').text('请输入 4 位数的验证码').addClass('red');
                flagcaptcha = false;
            } else {
                $('#captcha').removeClass('error');
                $('#captchaHelp').text('验证码').removeClass('red');
                flagCaptcha = true;
            }
        });

        // 点击注册按钮后验证
        $('#submitButton').click(function() {
            if (!flagName) {
                $('#username').addClass('error').focus();
                $('#nameHelp').text('请输入 3~16 位的用户名');
                return;
            }
            if (!flagPassword) {
                $('#password').addClass('error').focus();
                $('#passwordHelp').text('密码至少 6 位数');
                return;
            }

            if (!flagCaptcha) {
                $('#captcha').addClass('error').focus();
                $('#captchaHelp').text('请输入 4 位数的验证码');
                return;
            }

            let data = new FormData(document.getElementById('auth-form'));
            // $.ajaxSetup({
            //     headers: {
            //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            //     }
            // });
            ajax('/login/check', data, function(res) {
                if (res.status === 'success') {
                    console.log(res.message);
                    new LightTip().success(res.message);
                    setTimeout(function() {
                        location.href = '/';
                    }, 1500);
                } else {
                    console.log(res.message);
                    new LightTip().error(res.message);
                    $(".auth-captcha").attr("src", "/home/captcha/" + Math.random());
                }
            });
        });
    });
</script>
<?php include VIEW_PATH . 'layouts/_footer.view.php'; ?>